<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="/layui/css/layui.css" />
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>打款详情</title>
</head>
<body>
	<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/plugins/js/common.js"></script>
	<div class="layui-tab">
		<ul class="layui-tab-title">
			<li class="layui-this">产品信息</li>
			<li>扣款信息</li>
			<li>用户申请信息</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<form class="layui-form" id="saveForm">
					<br>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">产品名称：</label>
							<div class="layui-input-inline">
								<div class="layui-form-mid layui-word-aux"
									th:text="${product.name}"></div>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">标题：</label>
							<div class="layui-input-inline">
								<div class="layui-form-mid layui-word-aux"
									th:text="${product.productTitle}"></div>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">保障金额：</label>
							<div class="layui-input-inline">
								<div class="layui-form-mid layui-word-aux"
									th:text="${product.amountProtection}"></div>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">申请金额：</label>
							<div class="layui-input-inline">
								<div class="layui-form-mid layui-word-aux"
									th:text="${product.applyAmount}"></div>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">申请用户类型：</label>
							<div class="layui-input-inline">
								<div th:switch="${product.applyUserType}"
									class="layui-form-mid layui-word-aux">
									<p th:case="1">VIP用户</p>
									<p th:case="2">所有用户</p>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">描述：</label>
						<div class="layui-input-inline">
							<div class="layui-form-mid layui-word-aux"
								th:text="${product.remark}"></div>
						</div>
					</div>
				</form>
			</div>
			<div class="layui-tab-item">
				<table class="layui-hide" id="deductionList"
					lay-filter="deductionList"></table>
			</div>
			<div class="layui-tab-item">
			 <table class="layui-hide" id="appUserInfoProductList"
					lay-filter="appUserInfoProductList"></table>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
	var table;
	var layer;
	var appUserInfoProductTables;
	layui.use(['form','table'], function(){
		layer=layui.layer;
		  table = layui.table;
		  tableIns = initDeductionListTable(table);
		  appUserInfoProductTables = initAppUserInfoProductTable(table);
	});
	
	layui.use('element', function(){
	    var element = layui.element;
	    var $ = layui.jquery;
	    // 一些事件监听
	    element.on('tab(tab-card-title)', function(data){
	        $(".layui-tab-item").each(function () {
	           $(this).removeClass('layui-show');
	        });
	        $(".tag-item-"+data.index).removeClass('layui-show').addClass('layui-show');
	    });
	});
	
	function initDeductionListTable(){
		table.render({
		    elem: '#deductionList',
		    url:'/productPay/productPayListData?productId='+[[${product.id}]],
		    cellMinWidth: 30,
		    cols:[
			    	[
				      {field:'paymentRealName'  ,title: '打款人姓名'},
				      {field:'paymentIdCode', title: '打款人身份证号'},
				      {field:'paymentTotalAmount', title: '扣款总金额（元）'},
				      {field:'averageAmount', title: '每人扣款金额（元）'},
				      {field:'deductionNumberPeople', title: '扣款人数'},
				      {field:'creator', title: '操作人'},
				      {field:'createDate',  title: '操作时间',sort : true,fixed:false,templet:'<div>{{ formatDate(d.createDate)}}</div>'}
			    	]
		    	],
		    id: 'reloadFamilyTable',
		    page: true
		  });
	}
	
	function initAppUserInfoProductTable(){
		table.render({
		    elem: '#appUserInfoProductList',
		    url:'/productPay/appUserProductListData?productId='+[[${product.id}]],
		    cellMinWidth: 30,
		    cols:[
			    	[
				      {field:'applyPeopleName'  ,title: '参与人'},
				      {field:'idCode', title: '身份证号'},
				      {field:'productName',  title: '加入产品'},
				      {field:'amount',  title: '剩余金额'},
				      {field:'type', width:200, title: '类型',templet:function(value){
				    	  if(value.type==1){
				    		  return "个人";
				    	  }else{
				    		  return "家人";
				    	  }
				      	}
				      },
				      {field:'applyDate',  title: '加入日期',sort : true,fixed:false,templet:'<div>{{ formatDate(d.applyDate)}}</div>'}
			    	]
		    	],
		    id: 'reloadAppUserInfoProductTable',
		    page: true,
		    limit:4
		  });
	}
	
	
</script>
</body>
</html>